<template>
  <el-header class="layout-header">
    <div class="left">
      <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggle-click="toggleSidebar" />
      <breadcrumb class="breadcrumb-container" />
    </div>
    <div class="right">
      <!-- 语言切换 -->
      <el-dropdown class="language-switch right-menu-item" @command="handleLanguageChange">
        <div class="language-icon">
          <el-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"></path></svg></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :class="{ 'is-active': currentLanguage === 'zh-CN' }" command="zh-CN">简体中文</el-dropdown-item>
            <el-dropdown-item :class="{ 'is-active': currentLanguage === 'en-US' }" command="en-US">English</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      
      <el-dropdown class="avatar-container right-menu-item" trigger="click">
        <div class="avatar-wrapper">
          <el-avatar :size="36" :src="userAvatar" class="user-avatar">{{ userName.charAt(0).toUpperCase() }}</el-avatar>
          <div class="user-info">
            <span class="user-name">{{ userName }}</span>
            <span class="user-role">{{ userRole }}</span>
          </div>
          <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <router-link to="/profile">
              <el-dropdown-item>{{ $t('navbar.profile') }}</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided @click="logout">
              <span>{{ $t('navbar.logout') }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { ArrowDown } from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import Hamburger from '@/components/Hamburger/index.vue'
import { setLocale } from '@/i18n'

const appStore = useAppStore()
const userStore = useUserStore()
const router = useRouter()
const { t } = useI18n()

const sidebar = computed(() => appStore.sidebar)
const userInfo = computed(() => userStore.userInfo || {})
const userName = computed(() => userInfo.value?.name || userStore.name || '用户')
const userAvatar = computed(() => {
  // 安全地访问头像，提供默认值
  return userInfo.value?.avatar || ''
})

const userRole = computed(() => {
  return userStore.isAdmin ? t('user.roles.admin') : t('user.roles.user')
})

// 获取当前语言
const currentLanguage = computed(() => appStore.language)

// 切换语言
const handleLanguageChange = (locale) => {
  if (locale === currentLanguage.value) return
  appStore.setLanguage(locale)
  setLocale(locale)
  // 显示消息提示
  ElMessage.success(locale === 'zh-CN' ? t('navbar.language.changeSuccess.zh') : t('navbar.language.changeSuccess.en'))
}

const toggleSidebar = () => {
  appStore.toggleSidebar()
}

const logout = async () => {
  try {
    await userStore.logout()
    router.push('/login')
    ElMessage.success(t('navbar.logoutSuccess'))
  } catch (error) {
    console.error('退出登录失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.layout-header {
  background-color: var(--ba-bg-color-overlay);
  color: var(--el-text-color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--el-box-shadow-light);
  margin: 16px 16px 0 16px;
  height: 60px;
  border-radius: var(--el-border-radius-base);
  padding: 0 15px;
  
  .left {
    display: flex;
    align-items: center;
    
    .hamburger-container {
      line-height: 46px;
      height: 100%;
      float: left;
      cursor: pointer;
      transition: background 0.3s;
      
      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
    
    .breadcrumb-container {
      margin-left: 8px;
    }
  }
  
  .right {
    display: flex;
    align-items: center;
    
    .right-menu-item {
      margin-right: 15px;
      cursor: pointer;
      
      .right-icon {
        font-size: 20px;
        color: var(--el-text-color-regular);
        transition: color 0.2s;
        
        &:hover {
          color: var(--el-color-primary);
        }
      }
      
      .language-icon {
        display: flex;
        align-items: center;
        padding: 0 8px;
        height: 40px;
        border-radius: 20px;
        transition: background-color 0.3s;
        
        &:hover {
          background-color: rgba(0, 0, 0, 0.03);
        }
        
        .el-icon {
          font-size: 20px;
          color: var(--el-text-color-regular);
        }
      }
      
      .notification-badge {
        :deep(.el-badge__content) {
          top: 10px;
          right: 10px;
        }
      }
      
      .avatar-wrapper {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 0 8px;
        height: 40px;
        border-radius: 20px;
        transition: background-color 0.3s;
        
        &:hover {
          background-color: rgba(0, 0, 0, 0.03);
        }
        
        .user-avatar {
          flex-shrink: 0;
        }
        
        .user-info {
          margin: 0 6px;
          display: flex;
          flex-direction: column;
          line-height: 1.2;
          
          .user-name {
            font-size: 14px;
            font-weight: 500;
          }
          
          .user-role {
            font-size: 12px;
            color: var(--el-text-color-secondary);
          }
        }
        
        .dropdown-icon {
          font-size: 14px;
          color: var(--el-text-color-secondary);
        }
      }
    }
    
    :deep(.el-dropdown-menu__item) {
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 8px;
      }
      
      &.is-active {
        color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);
      }
    }
  }
}
</style>
